<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="关联广告组/广告账户" :visible.sync="dialogVisible" @close="resetForm()" width="932px">
        <AddAdverGroup ref="adverRef" @getAdverData="getAdverData"/>
        <AddStraUser ref="userRef" @getUserData="getUserData"/>
        <div class="adver_main flexbox flexcenter">
            <div class="table_width">
                <div class="adv_head">
                    <div class="hascheck_box flexbox flexcenter flexbetween" v-if="hasPlanData.length>0">
                        <div class="flexbox flexcenter">
                            <span>已选中{{hasPlanData.length}}项</span>
                            <el-link :underline="false" style="margin-left:20px" @click="batchDeletPlan">删除</el-link>
                        </div>
                        <div class="has_close"><i class="el-icon-close" @click="closeHasPlanCheck"></i></div>
                    </div>
                    <div class="flexbox flexcenter flexbetween" v-else>
                        <span class="font_16 color_01">已添加广告组</span>
                        <el-button plain icon="el-icon-circle-plus-outline" class="plain_blue" size="small" @click="addStrategyAdver">添加广告组</el-button>
                    </div>
                </div>
                <div class="adv_table">
                    <el-table :data="tableData" class="com_table" height="400px" ref="planRef" :row-key="(row)=>{ return row.id}" @selection-change="selectGroup">
                        <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:400px">
                            <img src="../../assets/img/null_icon.svg" alt="">
                            <div class="font_13 color_03">暂无数据，请添加广告组</div>
                        </div>
                        <el-table-column type="selection" width="35" align="center" :reserve-selection="true">
                        </el-table-column>
                        <el-table-column prop="id" label="广告组信息">
                            <template slot-scope="scope">
                                <div class="adv_name">{{scope.row.name}}</div>
                                <div class="adv_id">{{scope.row.id}}</div>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column prop="name" label="广告组名称">
                        </el-table-column> -->
                        <el-table-column label="操作" width="120">
                            <template slot-scope="scope">
                                <el-link type="danger" :underline="false" style="margin-left:10px" @click="deletAdverList(scope.$index)">删除</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="table_width">
                <div class="adv_head">
                    <div class="hascheck_box flexbox flexcenter flexbetween" v-if="hasUserData.length>0">
                        <div class="flexbox flexcenter">
                            <span>已选中{{hasUserData.length}}项</span>
                            <el-link :underline="false" style="margin-left:20px" @click="batchDeletUser">删除</el-link>
                        </div>
                        <div class="has_close"><i class="el-icon-close" @click="closeHasUserCheck"></i></div>
                    </div>
                    <div class="flexbox flexcenter flexbetween" v-else>
                        <span class="font_16 color_01">已添加广告账户</span>
                        <el-button plain icon="el-icon-circle-plus-outline" class="plain_blue" size="small" @click="addStraUser">添加广告账户</el-button>
                    </div>
                </div>
                <div class="adv_table">
                    <el-table :data="userData" class="com_table" height="400px" ref="userTable" :row-key="(row)=>{ return row.advertiser_id}" @selection-change="selectUser">
                        <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:400px">
                            <img src="../../assets/img/null_icon.svg" alt="">
                            <div class="font_13 color_03">暂无数据，请添加广告账户</div>
                        </div>
                        <el-table-column type="selection" width="35" align="center" :reserve-selection="true">
                        </el-table-column>
                        <el-table-column prop="advertiser_id" label="广告账户信息">
                            <template slot-scope="scope">
                                <div class="adv_name">{{scope.row.name}}</div>
                                <div class="adv_id">{{scope.row.advertiser_id}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" label="类型" width="110">
                            <template slot-scope="scope">
                                <div class="adv_name" v-for="item in scope.row.type" :key="item">{{item==1?"直播托管":"短视频托管"}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="90">
                            <template slot-scope="scope">
                                <el-link type="danger" :underline="false" style="margin-left:10px" @click="deletUserList(scope.$index)">删除</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import AddAdverGroup from './AddAdverGroup'
import AddStraUser from './AddStraUser'
export default {
    name: "",
    data() {
        return {
            dialogVisible: false,
            hasPlanData:[],
            tableData: [],
            hasUserData:[],
            userData: [],
        };
    },
    created() {},
    methods: {
        // 添加广告组
        addStrategyAdver() {
            this.$refs.adverRef.dialogVisible = true;
            this.$refs.adverRef.planData = this.tableData;
            this.$refs.adverRef.getDataList(1)
        },
        getAdverData(data) {
            this.tableData = data;
            this.$emit("getAdverData", this.tableData);
        },

        // 删除广告组
        deletAdverList(index) {
            this.tableData.splice(index, 1);
            this.hasPlanData = [];
            this.$refs.planRef.clearSelection();
            this.$emit("getAdverData", this.tableData);
        },

        // 选择广告组
        selectGroup(v){
            this.hasPlanData = v;
        },

        // 关闭已选广告组
        closeHasPlanCheck() {
            this.hasPlanData = [];
            this.$refs.planRef.clearSelection();
        },

        // 批量删除广告组
        batchDeletPlan() {
            for (let i in this.hasPlanData) {
                for (let a in this.tableData) {
                    if (
                        this.hasPlanData[i].id ==
                        this.tableData[a].id
                    ) {
                        this.tableData.splice(a, 1);
                    }
                }
            }
            this.hasPlanData = [];
            this.$refs.planRef.clearSelection();
            this.$emit("getAdverData", this.tableData);
        },

        // 添加账户
        addStraUser() {
            this.$refs.userRef.dialogVisible = true;
            this.$refs.userRef.userData = JSON.parse(JSON.stringify(this.userData));
            this.$refs.userRef.getDataList()
        },
        getUserData(data) {
            this.userData = data;
            this.$emit("getUserData", this.userData);
        },

        // 删除账户
        deletUserList(index) {
            this.userData.splice(index, 1);
            this.hasUserData = [];
            this.$refs.userTable.clearSelection();
            this.$emit("getUserData", this.userData);
        },

        // 选择账户
        selectUser(v){
            this.hasUserData = v;
        },

        // 关闭已选账户
        closeHasUserCheck() {
            this.hasUserData = [];
            this.$refs.userTable.clearSelection();
        },

        // 批量删除广告组
        batchDeletUser() {
            for (let i in this.hasUserData) {
                for (let a in this.userData) {
                    if (
                        this.hasUserData[i].advertiser_id ==
                        this.userData[a].advertiser_id
                    ) {
                        this.userData.splice(a, 1);
                    }
                }
            }
            this.hasUserData = [];
            this.$refs.userTable.clearSelection();
            this.$emit("getUserData", this.userData);
        },

        // 保存
        // submitForm() {
        //     this.$emit("getAdverData", this.tableData);
        // },

        // 关闭重置表单
        resetForm() {
            this.dialogVisible = false;
        },
    },
    components: {
        AddAdverGroup,
        AddStraUser
    },
};
</script>


<style scoped>
.table_width{
    width: 50%;
}
.hascheck_box{
    height: 30px;
    border: 1px solid #4475ff;
    background: #f6f8ff;
    padding: 0 20px;
    border-radius: 4px;
    font-size: 14px;
    color: #616c85;
}
.has_close{
    cursor: pointer;
    padding: 3px;
    border-radius: 2px;
}
.has_close:hover{
    background: #eeeff0
}
.adver_main{
    margin: -20px;
    position: relative;
}
.adver_main::after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 2;
    border-left: 1px solid #EBEBEB;
}
.adv_head{
    padding: 20px;
    border-bottom: 1px solid #EBEBEB
}
.adv_table{
    padding: 20px;
}
.adv_name{
    font-size: 14px;
    color: #616C85;
}
.adv_id{
    font-size: 14px;
    color: #B4B7BD;
    margin-top: 4px;
}
</style>
